<template>
  <view>
    <view class="mask">
      <view class="time_model common_model">
        <view v-for="el in dataList"
              @click="slectchange(el)"
              :key="el.id"
              class="item"
              :class="{active:el.status}">{{el.name}} </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dataList: Array
  },
  methods: {
    slectchange(e) {
      this.dataList.find((el) => el.status).status = false
      e.status = true
      this.$emit('selectChange', e)
    }
  }
}
</script>

<style lang="scss">
.mask {
  position: fixed;
  top: 190rpx;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;

  /* 发布时间model */
  .common_model {
    width: 750rpx;
    overflow: hidden;
    position: absolute;
    z-index: 999;
    top: 0rpx;
    background-color: #fff;

    .item {
      width: 750rpx;
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .active {
      font-weight: bold;
      &::after {
        content: '';
        width: 26rpx;
        height: 18rpx;
        background: url('/static/img/钩选.png') no-repeat 0 0 / 100% 100%;
      }
    }
  }
}
</style>